<template>
    <div class="app-container">
        <div class="project-manage">
            <div class='main-top'>
                <el-form   label-width="120px" :inline="true" :model="formInline" class="form-style">
                    <el-form-item label="操作人员姓名:">
                        <el-input v-model="formInline.name"  placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="工号:">
                        <el-input v-model="formInline.number"  placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="电话:">
                        <el-input v-model="formInline.phone"  placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item>  
                        <el-button @click="search()" type="primary">搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="reSet()" type="primary">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="main-nav">
                <div><el-button >数据同步</el-button></div>
            </div>
            <div class="main-table">
                <el-table stripe  :data="tableList" height="500" border style="width: 100%">
                    <el-table-column align="center" prop="name" label="配送员姓名" > </el-table-column>
                    <el-table-column align="center" prop="jobNumber" label="配送员工号" > </el-table-column>
                    <!-- <el-table-column align="center" prop="organizationId" label="组织编号" > </el-table-column> -->
                    <el-table-column align="center" prop="orgName" label="组织名称" > </el-table-column>
                    <el-table-column align="center" prop="phone" label="联系电话" > </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="totalPage"
                        @current-change="handleCurrentChange"    
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {getdispatchList} from '@/api/baseInfo'

export default {
    
    data() {
        return {
            tableList:[],
            formInline:{name:'',number:'',phone:''},
            tableLoading:false,
            currentPage:1,
            totalPage:0
        }
    },
    methods: {
        gettableList(current) {
            let data= 
                {
                "current": current || this.currentPage,
                "jobNumber": this.formInline.number,
                "name": this.formInline.name,
                "phone": this.formInline.phone,
                "size": 10
                }
            getdispatchList(data).then(res=>{
                console.log(res)
                this.tableList = res.data.data.records
                this.totalPage = res.data.data.total
                this.tableLoading = false
            })
        },
        reSet() {
            this.formInline = {number:'',name:'',phone:''}
            this.gettableList()
        },
        search() {
            this.currentPage = 1
			this.gettableList()
        },
        handleCurrentChange(current) {
            this.gettableList(current)
        }
    },
    created () {
        this.gettableList()
    }
  
}
</script>
<style rel="stylesheet/scss" lang="scss">
   @import "src/styles/mixin.scss";
    .project-manage{
        .main-top{
            padding: 32px 15px;
            padding-bottom: 20px;
            background-color: #FFF;
            .el-input{
                width: 150px ;
            }
            .el-button{
                padding: 11px 33px;
                margin-left: 5px;
            }
            .el-form-item{
                margin-right: 0px;
            }
        }
        .main-nav{
            @include navStyle
        }
        .addenp{
            .el-form-item{
            margin-bottom: 10px;
            }
            .el-dialog__body{
            padding: 30px 35px;
            padding-bottom: 0px;
            }
            .dialog-footer{
            padding:11px 50px 29px 0px;
            text-align: right;
            .el-button{
                padding: 10px 30px;
                border: none;
            }
            .cancel{
                color: #000;
                background: #E0E0E0;
                border-radius: 3px;
            }
            }
        }
        .block{
            text-align: center;
            margin-top: 15px;
        }
    }
</style>
